<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试</title>
	<style>
.showBigImg {
	position: fixed;
	z-index: 12;
	opacity: 1;
	transition: opacity .5s;
	left: 0;right: 0;top: 0;bottom: 0;
	background-color: #000;
}
.bigImg-header {
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    z-index: 1;
    position: relative;
    padding: 0 10px;
}

h1.mui-title {
  color: #000;
  display: inline-block;
  position: absolute;
  left: 0;right: 0;
  margin: 0;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.mui-action-back {
  color: #000;
  font-size: 18px;
}
img.bigImg {
	max-height: 90%;
	max-width: 100%;
	min-width: 50%;
	object-fit: contain;
	object-position: center;
	position: absolute;
	transition: transform .5s;
	left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}
	</style>
</head>
<body>
	<div class="showBigImg">
        <div class="bigImg-header">
          <a class="mui-action-back iconfont icon-left-j mui-pull-left mui-icon-left"></a>
          <h1 class="mui-title">预览图片</h1>
        </div>
        <img src="img.png" class="bigImg"/>
	</div>
	<script>
		(function () {
			this.dis = []
	    	//touchstart事件
		    function touchSatrtFunc(evt) {
		        try {
		          this.dis = [];
		          evt.preventDefault();//用来阻止手机的默认事件
		        }
		        catch (e) {
		            alert('touchSatrtFunc：' + e.message);
		        }
		    };
		    var theKey = 0
		    function touchMoveFunc(evt) {
		      try {
		        console.log(evt)
		        evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
		        var touch = evt.targetTouches[0]; //获取第一个触点
		        var x = Number(touch.pageX); //页面触点X坐标
		        var y = Number(touch.pageY); //页面触点Y坐标
		      
		        if (evt.targetTouches.length == 2) {
		          var touch1 = evt.targetTouches[1]; //获取第2个触点
		          var x1 = Number(touch1.pageX); //页面触点X坐标
		          var y1 = Number(touch1.pageY); //页面触点Y坐标
		          this.dis.push(Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2)));
		        }
		        if (this.dis.length > 0) {
		          if (this.dis[0] > this.dis[this.dis.length - 1]) {
		            if (theKey <= 1) {
		                return false;
		            } else {
		                theKey -= 0.05;
		            }
		            document.querySelector('.bigImg').style.webkitTransform = 'scale(' + theKey + ')';
		          } else {
		            theKey += 0.05;
		            document.querySelector('.bigImg').style.webkitTransform = 'scale(' + theKey + ')';
		            return false;
		          }
		        }
		      }
		      catch (e) {
		        alert('touchMoveFunc：' + e.message);
		      }
		    }
		    function touchEndFunc(evt) {
		      try {
		        evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动
		      }
		      catch (e) {
		        alert('touchEndFunc：' + e.message);
		      }
		    }
			
	      document.querySelector(".bigImg").addEventListener('touchstart', touchSatrtFunc, false);
	      document.querySelector(".bigImg").addEventListener('touchmove', touchMoveFunc, false);
	      document.querySelector(".bigImg").addEventListener('touchend', touchEndFunc, false);
		})()
	</script>
</body>
</html>